<template>
	<view>
		<view class="bjTop">
			<!-- <view class="flex flex-y-center userBox">
				<image class="userImg " src="@/static/images/tx.png" mode="widthFix"></image>
				<view>
					<view class="p1">
						负责人：张三
					</view>
					<view class="flex flex-y-center flex-x-center">
						<image class="img" src="@/static/images/wz.png" mode=""></image>
						<text class="mr10">天津</text>
						<image class="img ml10" src="@/static/images/sj.png" mode=""></image>
						<text>1588888888</text>
					</view>
				</view>
			</view> -->
			<view class="progress flex flex-y-center flex-x-between">
				<view class="item flex flex-y-center flex-x-center flex-column" :class="[pageData.step>=1?'ac':'']">
					<view class="num">1</view>
					<view>添加配置</view>
				</view>
				<view class="item flex flex-y-center flex-x-center flex-column" :class="[pageData.step>=2?'ac':'']">
					<view class="num">2</view>
					<view>确认配置</view>
				</view>
				<view class="item flex flex-y-center flex-x-center flex-column" :class="[pageData.step>=3?'ac':'']">
					<view class="num">3</view>
					<view>开始估计</view>
				</view>
				<view class="heng1 heng" :class="[pageData.step>=2?'ac':'']"></view>
				<view class="heng2 heng" :class="[pageData.step>=3?'ac':'']"></view>
			</view>
		</view>
		<view class="bjList">
			<view class="item" v-for="(item,index) in pageData.inquiryVos" @click="editBj(item,index)">
				<view class="p1">{{item.materials}}</view>
				<view>玻璃品种：{{item.materials}}/{{item.thickness}}</view>
				<view>中空：{{item.hollow||"暂无"}}</view>
				<view>夹胶：{{item.interlayer||"暂无"}}</view>
				<view>TNG：{{item.tng||"暂无"}}</view>
				<image @click="delPz(index)" class="del" src="@/static/images/sc.png" mode="widthFix"></image>
			</view>
			<view class="addPz" @click="addBj">点击添加配置</view>
		</view>
		<view class="bjCz ">
			<view class="flex flex-y-center flex-x-between mb30">
				<view class="item">
					<view class="p1">测量宽度</view>
					<view class="p2 flex flex-y-center flex-x-between">
						<input v-model="pageData.widthLimit" type="number" value="" placeholder="请输入宽度" />
						<text>毫米</text>
					</view>
				</view>
				<view class="item">
					<view class="p1">测量高度</view>
					<view class="p2 flex flex-y-center flex-x-between">
						<input v-model="pageData.heightLimit" type="number" value="" placeholder="请输入高度" />
						<text>毫米</text>
					</view>
				</view>
			</view>
			<view class="flex flex-y-center trips ">
				<image class=" mr10" src="@/static/images/ts.png" mode="widthFix"></image>
				<text class="f-28">如有问题请联系区域负责人</text>
			</view>
		</view>
		<view class="bjBot flex flex-y-center flex-x-between">
			<view class="btn1 item" @click="clearFn">清空</view>
			<view class="btn2 item" @click="jumpGs">估算</view>
		</view>
	</view>
</template>

<script setup>
	import store from "/store/index.js";
	import {
		ref
	} from 'vue'
	const pageData = ref({
		step: 1,
		inquiryVos: [], //配置列表数组
		heightLimit: '',
		widthLimit: '',
		editIndex: null
	})
	// 添加配置
	const addBj = () => {
		if (!store.state.token) {
			uni.showModal({
				title: '提示',
				content: '请先去登录哦！',
				success: function(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			return false;
		}

		if (pageData.value.inquiryVos.length >= 4) {
			uni.$showMsg("最多添加4个配置");
			return false
		}
		pageData.value.editIndex = null
		uni.navigateTo({
			url: '/pages/quotation/add?inquiryVos='+JSON.stringify(pageData.value.inquiryVos)
		})
	}
	// 编辑配置
	const editBj = (item, index) => {
		pageData.value.editIndex = index;
		uni.navigateTo({
			url: '/pages/quotation/add?params=' + JSON.stringify(item)+'&inquiryVos='+JSON.stringify(pageData.value.inquiryVos)
		})
	}
	// 估算
	const jumpGs = () => {
		if (!store.state.token) {
			uni.showModal({
				title: '提示',
				content: '请先去登录哦！',
				success: function(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			return false;
		}
		if (pageData.value.inquiryVos.length <= 0) {
			uni.$showMsg("请添加配置");
			return false;
		}
		if (pageData.value.inquiryVos.length < 2) {
			uni.$showMsg("至少两片玻璃");
			return false
		}
		let isFlag = false;
		pageData.value.inquiryVos.forEach((el) => {
			if (el.hollow || el.interlayer) {
				isFlag = true
			}
		})
		if (!isFlag) {
			uni.$showMsg("配置未选择中空或者加胶");
			return false;
		}
		if (!pageData.value.widthLimit) {
			uni.$showMsg("请输入宽度");
			return false;
		}
		if (!pageData.value.heightLimit) {
			uni.$showMsg("请输入高度");
			return false;
		}

		pageData.value.step = 3
		uni.navigateTo({
			url: '/pages/quotation/bjSearch?params=' + JSON.stringify(pageData.value)
		})
	}
	// 监听添加配置列表
	uni.$on("pzAddItem", (obj) => {
		if (pageData.value.editIndex != null) {
			pageData.value.inquiryVos[pageData.value.editIndex] = obj;
		} else {
			pageData.value.inquiryVos.push(obj);
		}
		pageData.value.step = 2
	});
	// 点击删除配置
	const delPz = (index) => {
		uni.showModal({
			title: '提示',
			content: '确定删除配置吗?',
			success: function(res) {
				if (res.confirm) {
					pageData.value.inquiryVos.splice(index, 1)
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	// 清空
	const clearFn = () => {
		uni.showModal({
			title: '提示',
			content: '确定清空吗?',
			success: function(res) {
				if (res.confirm) {
					pageData.value.step = 1;
					pageData.value.heightLimit = '';
					pageData.value.widthLimit = '';
					pageData.value.inquiryVos = [];
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	}

	uni.$on("pzClear", (obj) => {
		pageData.value.step = 1;
		pageData.value.heightLimit = '';
		pageData.value.widthLimit = '';
		pageData.value.inquiryVos = [];
	});

	onUnload(() => {
		console.log('onUnload');
		uni.$off("pzAddItem");
		uni.$off("pzClear");
	});
</script>

<style lang="scss" scoped>
	.bjTop {
		width: 100%;
		height: 230rpx;
		@include bg();
		padding: 40rpx 30rpx 0 30rpx;
		box-sizing: border-box;

		.userBox {
			color: #fff;
			margin-bottom: 20rpx;

			.userImg {
				width: 120rpx;
				height: 120rpx;
				border-radius: 120rpx;
				margin-right: 20rpx;
			}

			.p1 {
				font-size: 36rpx;
				margin-bottom: 10rpx;
			}

			.img {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.progress {
			width: 100%;
			height: 150rpx;
			background-color: #fff;
			border-radius: 10rpx;
			position: relative;

			.item {
				width: 33.33%;
				height: 100%;
				font-size: 28rpx;
				color: #333;

				.num {
					width: 40rpx;
					height: 40rpx;
					border-radius: 40rpx;
					line-height: 40rpx;
					text-align: center;
					font-size: 30rpx;
					color: #fff;
					background-color: #999;
					margin-bottom: 10rpx;
					position: relative;
					z-index: 11;
				}
			}

			.item.ac {
				color: #F6AD00;

				.num {
					background-color: #F6AD00;
				}
			}

			.heng1 {
				width: 230rpx;
				height: 3rpx;
				background-color: #888;
				position: absolute;
				top: 52rpx;
				left: 100rpx;
			}

			.heng2 {
				width: 230rpx;
				height: 3rpx;
				background-color: #888;
				position: absolute;
				top: 52rpx;
				left: 330rpx;
			}

			.heng.ac {
				background-color: #F6AD00;
			}
		}

	}

	.bjList {
		padding: 30rpx;
		background-color: #f5f5f5;

		.item {
			color: #555;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;
			line-height: 56rpx;
			font-size: 30rpx;
			position: relative;
			margin-bottom: 30rpx;

			.p1 {
				font-weight: 600;
				font-size: 36rpx;
			}

			.del {
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				width: 48rpx;
				height: 48rpx;
				border-radius: 48rpx;
			}
		}

		.addPz {
			@include bg();
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 15rpx;
			color: #fff;
			text-align: center;
			font-size: 28rpx;
		}
	}

	.bjCz {
		padding: 30rpx;

		.item {
			width: 48%;
			height: 180rpx;
			border-radius: 10rpx;
			overflow: hidden;

			.p1 {
				width: 100%;
				@include bg();
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				color: #fff;
				font-size: 32rpx;
			}

			.p2 {
				background-color: #F5F5F5;
				font-size: 30rpx;
				color: #333;
				padding: 0 15rpx;

				input {
					width: 70%;
					height: 90rpx;
					line-height: 90rpx;
					font-size: 30rpx;
					color: #333;
				}
			}
		}
	}

	.trips {
		image {
			width: 32rpx;
			height: 32rpx;
		}

		color: #F6AD00;
	}

	.bjBot {
		padding: 0 30rpx 30rpx 30rpx;

		.item {
			width: 48%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #F6AD00;
			background-color: #DDD;
			font-size: 30rpx;
			border-radius: 10rpx
		}

		.btn2 {
			@include bg();
			color: #fff;
		}
	}
</style>